<template>
  <el-dialog
    v-model="store.isVisible"
    :title="store.title()"
    :style="store.dialogStyle"
    @close="store.hide()"
  >
      <HtmlModuleEmbedder 
        ref="embedderRef"
      />
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { biBridge } from '@/appox/bi-bridge'
import { usePageDialogStore } from '@/stores/pageDialog'
import HtmlModuleEmbedder from '@/components/common/HtmlModuleEmbedder.vue'

const store = usePageDialogStore()
const embedderRef = ref(null)

watch(() => store.embedderEntryName, async (newValue) => {
  if (newValue) {
    while (!embedderRef.value) {
      await new Promise(resolve => setTimeout(resolve, 10))
    }
    const contentWindow = embedderRef.value.setConfig(newValue, store.embedderBridgeId, store.embedderWebStyleHeight)
    if (contentWindow) biBridge.registerModuleContentWindow(store.embedderBridgeId, contentWindow)
  }
  else {
    if (embedderRef.value) embedderRef.value.reset()
  }
})

</script>